<template>
  <div>
    <van-search
      v-model="value"
      shape="round"
      background="#fff"
      placeholder="请输入搜索关键词"
    >
      <template #left>
        <van-icon name="arrow-left" size="20" @click="goback" />
      </template>
    </van-search>
    <ul class="ul1">
      <li v-for="item in list" :key="item.proid" @click="godetail(item.proid)">
        <img :src="item.img1" />
        <div>
          <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
          <p class="colorred">￥{{ item.originprice }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getcategory } from "@/api/search";
export default {
  data() {
    return {
      value: "",
      list: [],
    };
  },
  created() {
    console.log(this.$route.params.name);
    getcategory({
      category: localStorage.getItem("category"),
      brand: this.$route.params.name,
    }).then((res) => {
      this.list = res.data.data;
      console.log(this.list);
      // this.value=this.list[0].brand
    });
  },
  methods: {
    goback() {
      this.$router.back();
    },
    godetail(proid) {
      this.$router.push("/Detail/" + proid);
    },
  },
};
</script>

<style scoped>
.van-search {
  border-bottom: 1px solid #f4f4f4;
}
.ul1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.ul1 li {
  width: 49%;
  background-color: white;
  border-radius: 0.625rem;
}
.ul1 li img {
  width: 100%;
}
</style>